<template>
    <div class="jt_ksh">
        <div class="bg_pic"><i class="scan_pn"></i></div>
        <div class="bottom_pan">
            <span class="yuan"><i class="spin_fa"></i></span>
            <div class="car_con"><img :src="require('@/assets/images/largeTransport/car2.png')" class="twinkle"></div>
        </div>
        <div class="head_con">
            <div class="largelogo">
                <a><img :src="require('@/assets/images/largeTransport/logo.png')"></a>
                <i class="s_topbar stl"><em></em></i>
                <i class="s_topbar str"><em></em></i>
                <span class="shadow_line"><i class="moves1a"></i></span>
            </div>
        </div>
        <div class="jt_main">
            <div class="left_box">
                <i class="moves1a i_move_t move_skew1"></i>
                <i class="moves1b i_move_t3" style="left: -18px;"></i>
                <div class="skew">
                    <h3 class="title_div"><span>车辆类型申请量统计</span></h3>
					<div class="tubiao mT20">
						<div class="dp_ech-bg distable" style="height: 225px;">
                            <i class="sbt_sv spin"></i>
                            <div class="discell">
                                <p></p>
                            </div>
                        </div>
						<EchartPieD height="225px" />
					</div>
                </div>
				<br>
                <br>
                <br>
				<div class="skew">
					<h3 class="title_div"><span>车辆类型申请量统计</span></h3>
					<div class="tubiao mT20">
						<div class="dp_ech-bg distable" style="height: 225px;">
                            <i class="sbt_sv spin"></i>
                            <div class="discell">
                                <p></p>
                            </div>
                        </div>
						<EchartPieD height="225px" />
					</div>
				</div>
            </div>
			<div class="right_box">
				<i class="moves1a i_move_t move_skew2"></i>
                <i class="moves1b i_move_t1" style="right: -15px;"></i>
				<div class="skew">
					<h3 class="title_div mB10" style="transform: skewY(-2deg);"><span>道路日均通行量TOP10</span></h3>
					<div class="list_c ud_lsie">
						<vue-seamless-scroll :data="listData" :class-option="optionHover" class="seamless-warp">
							<ul>
                                <li v-for="(item,index) in listData">
                                    <div class="bar_con bys">
                                        <label style="width: 120px; text-align: left;">S21-广惠高速</label>
                                        <span>88%</span>
                                        <div class="bars"><i style="width: 88%;"><em></em></i></div>
                                    </div>
                                </li>
							</ul>
						</vue-seamless-scroll>
					</div>
				</div>
				<br>
                <br>
                <div class="skew">
					<h3 class="title_div mB10"><span>近一年每月违规运输量</span></h3>
                    <div class="tubiao" style="transform: skewY(1deg);">
						<EchartLineB height="230px" />
					</div>
				</div>
			</div>
			<div class="center_box">
				<div class="border_con">
					<i class="dor d1"></i>
                    <i class="dor d2"></i>
                    <i class="dor d3"></i>
                    <i class="dor d4"></i>
                    <i class="moves1a i_move_t"></i>
                    <i class="moves1b i_move_t1"></i>
                    <i class="moves1d i_move_t3"></i>
					<div class="center_top">
                        <div class="center_data">
                            <span>今日通行<b class="cl1">234</b></span>
                            <span>违规运输<b class="cl2">44</b></span>
                        </div>
                    </div>
					<div class="mapcon_box mB15">
						<baidu-map
							class="bm-viewbm-view"
							:center="center"
							:zoom="zoom"
							:scroll-wheel-zoom="true"
							@ready="handler"
							:mapStyle="mapStyle"
						>
						</baidu-map>
					</div>
                    <h3 class="title_div" style="margin-bottom: -30px;"><span>三大类运输申请量占比</span></h3>
					<div class="tubiao">
						<EchartBarE height="310px" />
					</div>
				</div>
			</div>
        </div>
    </div>
</template>

<script>
import EchartPieD from '@/components/echarts/echart_pieD.vue';
import EchartLineB from '@/components/echarts/echart_lineB.vue';
import EchartBarE from '@/components/echarts/echart_barE.vue';
import blueMap from '@/views/cases/js/blueMap.json'

export default {
	components: {
		EchartPieD,
		EchartLineB,
		EchartBarE,
	},
    data() {
        return{
			listData:[{},{},{},{},{},{},{},{}],
			//没有设置 center 和 zoom 属性的地图组件是不进行地图渲染的。
			//当center 属性为合法地名字符串时例外，因为百度地图会根据地名自动调整 zoom 的值。
			center: { lng: 0, lat: 0 },
			zoom: 3,
			map: null,
			BMap: null,
			mapStyle: {
				styleJson: blueMap
			},
		}
    },
	computed: {
		optionHover () {
			return {
				singleHeight: 56,
				waitTime: 2500,
			}
		}
	},
	methods: {
		//由于百度地图 JS API 只有 JSONP 一种加载方式，因此 BaiduMap 组件及其所有子组件的渲染只能是异步的。因此，请使用在组件的 ready 事件来执行地图 API 加载完毕后才能执行的代码，不要试图在 vue 自身的生命周期中调用 BMap 类，更不要在这些时机修改 model 层。
		handler({ BMap, map }) {
			this.map = map;
			this.BMap = BMap;
			this.center.lng = 113.397552;
			this.center.lat = 22.526454;
			this.zoom = 15;
        },
	}
}
</script>

<style lang="less" scoped>
.seamless-warp {
  height: 290px;
  overflow: hidden;
}
.jt_ksh { width: 1920px; height: 1200px; position: relative; overflow: hidden; transform-origin: left top;}
.jt_ksh_scr { width: 1920px; height: 100%; position: relative; overflow: hidden; transform-origin: left top;}
.bg_pic { background: url(~@/assets/images/largeTransport/sy_bg.jpg) no-repeat; position: absolute; width: 100%; height: 100%; z-index: 1;}
.head_con { position: relative; width: 1920px; height: 75px; top: 0; left: 0; z-index: 20;}
.head_con .largelogo { position: absolute; width: 1920px; height: 75px; background: url(~@/assets/images/largeTransport/logo_con.png) no-repeat; left: 50%; margin-left: -960px; text-align: center;}
.head_con .largelogo .shadow_line { position: absolute; height: 100%; width: 600px; left: 50%; margin-left: -200px;}
.head_con .largelogo i { display: block; position: absolute; background: url(~@/assets/images/largeTransport/logo_con_shadow.png); width: 809px; height: 124px; left: 50%; margin-left: -404px; bottom: -50px;}
.head_con .largelogo .s_topbar { display: block; position: absolute; width: 124px; height: 6px; background-image: linear-gradient(90deg, #00d2ff 0%, #2968e8 100%); border-radius: 6px; overflow: hidden; margin-left: auto;}
.head_con .largelogo .s_topbar em { display: block; position: absolute; width: 248px; height: 6px; background-image: linear-gradient(90deg, #00d2ff 0%, #2968e8 50%, #00d2ff 100%); border-radius: 6px; animation: 3s linear 0s alternate infinite running color_ch;}
@keyframes color_ch {
	0% {
		left: 0;
	}
	100% {
		left: -100%;
	}
}
.head_con .largelogo .s_topbar.stl { top: 22px; left: 358px;}
.head_con .largelogo .s_topbar.str { top: 23px; right: 382px;}

.bottom_pan { background: url(~@/assets/images/largeTransport/dipan.png); width: 1920px; height: 639px; position: absolute; bottom: 0px; left: 0; z-index: 1; overflow: hidden; opacity: 0.7;}
.bottom_pan .yuan { position: absolute; width: 1800px; height: 1800px; left: 50%; margin-left: -910px; display: block; transform: rotateX(83deg) scale(0.96); top: -435px;}
.bottom_pan .yuan i { display: block; background: url(~@/assets/images/largeTransport/yuan.png); width: 1800px; height: 1800px; position: relative; left: 0; top: 0; animation-duration: 15s;}
.bottom_pan .car_con { background: url(~@/assets/images/largeTransport/car.png); width: 328px; height: 246px; position: absolute; right: 140px; bottom: 110px; transform: scale(0.9);}

.spin_zh { animation: 50s linear 0s normal infinite running spin_zh;}
.spin_fa { animation: 50s linear 0s normal infinite running spin_fa;}
@keyframes spin_zh {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(359deg);
	}
}
@keyframes spin_fa {
	0% {
		transform: rotate(359deg);
	}
	100% {
		transform: rotate(0deg);
	}
}

.moves1a { animation: 2s linear 0s normal infinite running moves1a;}
.moves1b { animation: 2s linear 0s normal infinite running moves1b;}
.moves1c { animation: 2s linear 0s normal infinite running moves1c;}
.moves1d { animation: 2s linear 0s normal infinite running moves1d;}
@keyframes moves1a {
	0% {
		left: 0%;
		opacity: 0.6;
	}
	30% {
		left: 30%;
		opacity: 1;
	}
	60% {
		left: 60%;
		opacity: 0.6;
	}
	100% {
		left: calc(100% - 90px);
		opacity: 0;
	}
}
@keyframes moves1b {
	0% {
		top: 0%;
		opacity: 0.4;
	}
	30% {
		top: 30%;
		opacity: 1;
	}
	60% {
		top: 60%;
		opacity: 0.6;
	}
	100% {
		top: calc(100% - 30px);
		opacity: 0;
	}
}
@keyframes moves1c {
	0% {
		right: 0%;
		opacity: 0.6;
	}
	30% {
		right: 30%;
		opacity: 1;
	}
	60% {
		right: 60%;
		opacity: 0.6;
	}
	100% {
		right: calc(100% - 90px);
		opacity: 0;
	}
}
@keyframes moves1d {
	0% {
		bottom: calc(0% + 45px);
		opacity: 0.4;
	}
	30% {
		bottom: 30%;
		opacity: 1;
	}
	60% {
		bottom: 60%;
		opacity: 0.6;
	}
	100% {
		bottom: calc(100% - 30px);
		opacity: 0;
	}
}

.moves1a { animation: 2s linear 0s normal infinite running moves1a;}
.moves1b { animation: 2s linear 0s normal infinite running moves1b;}
.moves1c { animation: 2s linear 0s normal infinite running moves1c;}
.moves1d { animation: 2s linear 0s normal infinite running moves1d;}
.i_move_t{width: 90px; height: 18px; background: url(~@/assets/images/largeTransport/sy_xl_bg-light.png) no-repeat center center; top: -10px; display:block; position: absolute;}
.i_move_t1{width: 90px; height: 18px; background: url(~@/assets/images/largeTransport/sy_xl_bg-light.png) no-repeat center center; top: -30px; right: -47px; transform: rotate(90deg); display:block; position: absolute; opacity: 0;}
.i_move_t2{width: 90px; height: 18px; background: url(~@/assets/images/largeTransport/sy_xl_bg-light.png) no-repeat center center; bottom: -6px; display:block; position: absolute;}
.i_move_t3{width: 90px; height: 18px; background: url(~@/assets/images/largeTransport/sy_xl_bg-light.png) no-repeat center center; bottom: 30px; left: -43px; transform: rotate(90deg); display:block; position: absolute; opacity: 0;}
@keyframes moves1a {
	0% {
		left: 0%;
		opacity: 0.6;
	}
	30% {
		left: 30%;
		opacity: 1;
	}
	60% {
		left: 60%;
		opacity: 0.6;
	}
	100% {
		left: calc(100% - 90px);
		opacity: 0;
	}
}
@keyframes moves1b {
	0% {
		top: 0%;
		opacity: 0.4;
	}
	30% {
		top: 30%;
		opacity: 1;
	}
	60% {
		top: 60%;
		opacity: 0.6;
	}
	100% {
		top: calc(100% - 30px);
		opacity: 0;
	}
}
@keyframes moves1c {
	0% {
		right: 0%;
		opacity: 0.6;
	}
	30% {
		right: 30%;
		opacity: 1;
	}
	60% {
		right: 60%;
		opacity: 0.6;
	}
	100% {
		right: calc(100% - 90px);
		opacity: 0;
	}
}
@keyframes moves1d {
	0% {
		bottom: calc(0% + 45px);
		opacity: 0.4;
	}
	30% {
		bottom: 30%;
		opacity: 1;
	}
	60% {
		bottom: 60%;
		opacity: 0.6;
	}
	100% {
		bottom: calc(100% - 30px);
		opacity: 0;
	}
}

.move_skew1 { animation: 2s linear 0s normal infinite running move_skew1; transform: skewY(5deg);}
@keyframes move_skew1 {
	0% {
		left: 0%;
		opacity: 0.6;
        top: 18px;
	}
	30% {
		left: 30%;
		opacity: 1;
        top: 29px;
	}
	60% {
		left: 60%;
		opacity: 0.6;
        top: 38px;
	}
	100% {
		left: calc(100% - 90px);
		opacity: 0;
        top: 46px;
	}
}
.move_skew2 { animation: 2s linear 0s normal infinite running move_skew2; transform: skewY(-4deg);}
@keyframes move_skew2 {
	0% {
		right: 0%;
		opacity: 0.6;
        top: 16px;
	}
	30% {
		right: 30%;
		opacity: 1;
        top: 26px;
	}
	60% {
		right: 60%;
		opacity: 0.6;
        top: 36px;
	}
	100% {
		right: calc(100% - 90px);
		opacity: 0;
        top: 40px;
	}
}

.jt_main { position: relative; z-index: 11; padding-top: 60px;}

.left_box { position: absolute; background: url(~@/assets/images/largeTransport/l_box_bg.png); width: 452px; height: 774px; left: 50%; top: 35px; margin-left: -940px; box-sizing: border-box; padding: 85px 60px 0 40px;}
.right_box { position: absolute; background: url(~@/assets/images/largeTransport/r_box_bg.png); width: 463px; height: 770px; left: 50%; top: 35px; margin-left: 492px; box-sizing: border-box; padding: 85px 60px 0;}

.left_box .skew:nth-of-type(1) { transform: skewY(4deg);}
.left_box .skew:last-child { transform: skewY(1deg);}
.right_box .skew:nth-of-type(1) { transform: skewY(-1deg);}
.right_box .skew:last-child { transform: skewY(-1deg);}

.title_div { background: url(~@/assets/images/largeTransport/title_bg.png) no-repeat left bottom; height: 30px; padding-left: 24px; font-size: 18px; color: #fff; position: relative; margin-right: 65px; text-align: left;}
.title_div span { background-image:-webkit-linear-gradient(top,#fff 30%,#7cebff); 
    -webkit-background-clip:text; 
    -webkit-text-fill-color:transparent;
}
.title_div::after { content: ''; position: absolute; background: url(~@/assets/images/largeTransport/title_bg_after.png); width: 65px; height: 16px; bottom: 0; right: -65px;}

.dp_ech-bg { position: absolute; height: 100%; width: 100%; text-align: center; background-size: auto 100%;}
.dp_ech-bg p { font-size: 20px; color: #fff;}
.sbt_sv { width: 183px; height: 183px; background: url(~@/assets/images/largeTransport/ech_imgbg2.png) no-repeat; display: block; position: absolute; top: 50%; left: 50%; margin-left: -92px; margin-top: -92px; animation-duration: 20s;}

.spin { animation: 3s linear 0s normal infinite running spin;}
@keyframes spin {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(359deg);
	}
}

.ud_lsie .bar_con { margin-left: 0; margin-right: 0; height: auto; padding-bottom: 5px;}
.ud_lsie .bar_con label { left: 0; position: relative;}
.ud_lsie .bar_con span { right: 0; top: 10px;}
.bar_con.bys .bars i em { position: absolute; width: 100%; height: 100%; background: url(~@/assets/images/largeTransport/bars_y.png) repeat-x; border-radius: 14px;}
.bar_con.bys span { color: #fed100;}
.bar_con.by_r .bars i em { position: absolute; width: 100%; height: 100%; background: url(~@/assets/images/largeTransport/bars_r.png) repeat-x; border-radius: 14px;}
.bar_con.by_r span { color: #fa486a;}

.bar_con { margin-left: 60px; margin-right: 60px; height: 20px; font-size: 16px; color: #fff; position: relative; padding: 10px 0;}
.bar_con label { display: block; position: absolute; width: 60px; left: -60px; text-align: center;}
.bar_con span { display: block; position: absolute; width: 60px; right: -60px; text-align: right; color: #20f2ff;}
.bar_con .bars { height: 14px; background: url(~@/assets/images/largeTransport/barsbg.png); border-radius: 14px; margin-top: 4px; position: relative; overflow: hidden;}
.bar_con .bars i { position: absolute; width: 100%; height: 100%; border-radius: 14px;}
.bar_con .bars i em { position: absolute; width: 100%; height: 100%; background: url(~@/assets/images/largeTransport/bars.png) repeat-x; border-radius: 14px; overflow: hidden;}
.bar_con .bars i em::after { content: ''; position: absolute; width: 121px; height: 100%; background: url(~@/assets/images/largeTransport/bars_white.png) no-repeat; top: 0; left: 0; display: block; animation: 3s linear 0s normal infinite running bar_wmu;}
.bar_con .bars i em { animation: 10s linear 0s normal infinite running bar_slid;}
@keyframes bar_slid {
	0% {
		width: 0;
	}
	5% {
		width: 100%;
	}
	100% {
		width: 100%;
	}
}
@keyframes bar_wmu {
	0% {
		left: -121px;
	}
	80% {
		left: 100%;
	}
	100% {
		left: 100%;
	}
}

.center_box { width: 1064px; height: 856px; margin: auto; position: relative; box-shadow: 0 0 30px rgba(0, 0, 0, 0.65);}
.center_top { position: absolute; width: 100%; height: 76px; left: 0; top: -33px; text-align: center;}
.center_data { display: inline-block; font-size: 18px; color: #fff; background: url(.~@/assets/images/largeTransport/center_title.png) center top; height: 76px; margin: 0 30px; position: relative; min-width: 299px; z-index: 5;}
.center_data::before { position: absolute; width: 40px; height: 100%; content: ''; background: url(~@/assets/images/largeTransport/center_title-l.png) no-repeat left top; top: 0; left: -30px; display: block;}
.center_data::after { position: absolute; width: 40px; height: 100%; content: ''; background: url(~@/assets/images/largeTransport/center_title-r.png) no-repeat left top; top: 0; right: -30px; display: block;}
.center_data span { display: inline-block; height: 62px; line-height: 62px; padding: 0 20px; background: url(~@/assets/images/largeTransport/center_title_line.png) no-repeat right center;}
.center_data span:last-child { background: none;}
.center_data span b { font-family: 'digifacewideregular'; font-size: 30px; transform: scaleX(0.8); font-weight: normal; display: inline-block; vertical-align: middle; margin-top: -6px;}
.cl1 { background-image:-webkit-linear-gradient(top,#f8e289 30%,#f2c822); 
    -webkit-background-clip:text; 
    -webkit-text-fill-color:transparent;}
.cl2 { background-image:-webkit-linear-gradient(top,#ff6a5b 30%,#f9412e); 
    -webkit-background-clip:text; 
    -webkit-text-fill-color:transparent;}

	.border_con { border: 1px solid #0087fa; height: 100%; position: relative; background: rgba(0, 17, 55, 0.8); box-sizing: border-box; padding: 10px; box-shadow: 0 0 15px #134d8b inset;}
.border_con > i { position: absolute; }
.border_con .dor { background: url(~@/assets/images/largeTransport/dor1.png); width: 15px; height: 15px;}
.border_con .dor.d1 { left: -2px; top: -2px;}
.border_con .dor.d2 { background-image: url(~@/assets/images/largeTransport/dor2.png); right: -2px;top: -2px;}
.border_con .dor.d3 { right: -2px; bottom: -2px; transform: rotate(180deg);}
.border_con .dor.d4 { background-image: url(~@/assets/images/largeTransport/dor2.png); left: -2px; bottom: -2px; transform: rotate(180deg);}

.mapcon_box { border: 1px solid #1a48cb; height: 514px; background: #000000; overflow: hidden;}
.mapcon { border: 0px solid #1a48cb; height: 514px; background: #000000;}

.bm-viewbm-view {
  width: 100%;
  height: 514px;
}

/deep/.anchorBL {
  display: none;
}
</style>